<script setup>

import {useData} from "vitepress"

const {page, frontmatter} = useData()

// 局部页面重写
const list = [
  {title: "aaa", index: 1},
  {title: "bbb", index: 2},
  {title: "ccc", index: 3},
  {title: "ddd", index: 4},
  {title: "eee", index: 5},
  {title: "fff", index: 6},
  {title: "ggg", index: 7},
]

</script>

<template>
  <div class="example-container">
    <div class="example-list">
      <span class="example-item"
            v-for="(item, idx) in list" :key="idx">{{ item.title }}</span>
    </div>
    <div class="example-layout">
      <div>当前页面选用布局名称是：{{ frontmatter.layout }}</div>
      <div>特殊参数：{{ frontmatter.aaa }}</div>
    </div>
  </div>
</template>

<style>

.example-container {
  display: flex;
  flex-direction: column;
  justify-content: center;

  box-sizing: border-box;
  margin: 16px;
  padding: 8px;


}

.example-list {
  display: flex;
  justify-content: center;

  margin: 16px;

  background-color: azure;
}

.example-item {
  border: 2px solid #41d1ff;
}


.example-layout {

}

</style>